<script type="text/javascript" src="../../dist/gss.js"></script>

<section class="banner-cta cta-left else" id="banner-cta-cta-left-14-background" style="position:relative;">

<style type="text/css" scoped="scoped">
body, h2, h1 {
  padding: 0;
  margin: 0;
  font-family: Arial;
}

@media (max-width: 599px) {
  #banner-cta-cta-left-14-background {
    background-image: url('https://imgflo.herokuapp.com/graph/vahj1ThiexotieMo/d9c53cb1520200f7d46a9d9096b182d1/passthrough?input=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fcdn.thegrid.io%2Fassets%2Fimages%2Fmountain.jpg&width=599&height=449.25');
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  #banner-cta-cta-left-14-background {
    background-image: url('https://imgflo.herokuapp.com/graph/vahj1ThiexotieMo/eb5860c92d828384d3afdf2f4fdbcd4d/passthrough?input=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fcdn.thegrid.io%2Fassets%2Fimages%2Fmountain.jpg&width=800&height=600');
  }
}

@media (min-width: 960px) {
  #banner-cta-cta-left-14-background {
    background-image: url('https://imgflo.herokuapp.com/graph/vahj1ThiexotieMo/eb5860c92d828384d3afdf2f4fdbcd4d/passthrough?input=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fcdn.thegrid.io%2Fassets%2Fimages%2Fmountain.jpg&width=800&height=600');
  }
}</style><h1 class="title main">What would you do with 10hrs extra a week?</h1><aside><h1 class="title">$96</h1><h2 class="subtitle">Per Year</h2><button class="button preorder"><span>Pre-order now</span></button><svg version="1.1" class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 46 46" enable-background="new 0 0 46 46" xml:space="preserve">
  <polygon points="46,46 0,46 0,0 46,0 46,2 2,2 2,44 44,44 44,13 13,13 13,33 33,33 33,24 22,24 22,22 35,22 35,35 11,35 11,11 46,11"/>
</svg></aside></section>

<style>

.banner-cta {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow-y: hidden;
}

.banner-cta:before {
  content: "";
  background: hsla(0, 0%, 0%, .3);
  width: 150%;
  height: 100%;
  top: 0;
  left: -25%;
  right: -25%;
  position: absolute;
}

.banner-cta .title.main {
  color: hsl(270, 33%, 99%);
}

.banner-cta aside {
  background-color: hsla(270, 4%, 9%, .9);
  text-align: center;
}

.banner-cta aside .title {
  color: hsl(43, 82%, 69%);
}

.banner-cta aside .subtitle {
  color: hsl(195, 26%, 42%);
  text-transform: uppercase;
}

.banner-cta aside .button {
  background-color: hsl(195, 77%, 69%);
  border: none;
  color: hsl(11, 31%, 13%);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
}

.banner-cta aside svg.logo {
  fill: hsla(195, 25%, 42%, .1);
}


@media (max-width: 599px) {
  .banner-cta .title.main {
    font-size: 34px;
    text-align: center;
  }

  .banner-cta aside {
    overflow: hidden;
  }

  .banner-cta aside .title {
    font-size: 32px;
  }

  .banner-cta aside .subtitle {
    font-size: 18px;
  }

  .banner-cta aside .button {
    font-size: 16px;
  }

  .banner-cta aside svg.logo {
    visibility: hidden;
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  .banner-cta .title.main {
    font-size: 34px;
  }

  .banner-cta aside {
    overflow: hidden;
  }

  .banner-cta aside .title {
    font-size: 32px;
  }

  .banner-cta aside .subtitle {
    font-size: 18px;
  }

  .banner-cta aside .button {
    font-size: 16px;
  }

  .banner-cta aside svg.logo {
    visibility: hidden;
  }
}

@media (min-width: 960px) {
  .banner-cta .title.main {
    font-size: 64px;
  }

  .banner-cta aside .title {
    font-size: 56px;
  }

  .banner-cta aside .subtitle {
    font-size: 20px;
  }

  .banner-cta aside .button {
    font-size: 20px;
  }

  .banner-cta aside svg.logo {
    visibility: visible;
  }
}
</style>

<style type="text/gss">


section {
  width: 100%;
  width: == ::window[width] !require;
  top: == 0 !require;
  left: == 0 !require;
  z-index: 1;
  overflow-x: hidden;
  margin: auto;
  width: 100%;

  height: <= ::window[height] !weak;
  height: >= &[width] / 2.4 !weak;
}

.modal {
  @h |(&)| in(::window);
  @v |(&)| in(::window);
}

section.footer {
  width: == ::window[width];
  height: == 144;

  (& .content)[center] == &[center];

  .content {
    size: == &[intrinsic-size];
  }
}
.banner-cta {
  .title.main {
    height: == &[intrinsic-height];
  }

  aside {
    border-radius: == &[width] / 2;
    size: == ^[aside-size];

    (& .title)[margin-top] == ^[aside-title-margin-top];

    .button {
      margin-top: == ^^[aside-button-margin-top];
      padding-top: == &[padding-bottom] == ^^[aside-button-v-padding];
      padding-left: == &[padding-right] == ^^[aside-button-h-padding];
    }
  }
}


/*

portrait mobile

----------------------------------------------- */

@if ::window[width] <= 600 {


  .banner-cta {

    .title.main {
      font-size: 34px;
    }
    aside {
      overflow: hidden;
    }
    aside .title {
      font-size: 32px;
    }
    aside .subtitle {
      font-size: 18px;
    }
    aside .button {
      font-size: 16px;
    }
    aside svg.logo {
      visibility: hidden;
    }

    @v |-(& .title.main)~-~(& aside)-| in(&) gap($base * 3) outer-gap($base * 5);
    @h |~-~(& .title.main)~-~| in(&) gap($base * 4);
    @h |~-~(& aside)~-~| in(&) gap($base * 4);
    (& .title.main)[center-x] == (& aside)[center-x] == (&)[center-x];

    [aside-size] == $md * 3;
    [aside-title-margin-top] == ($base * 6) - 16;
    [aside-button-margin-top] == $base * 2;
    [aside-button-h-padding] == $base * 2;
    [aside-button-v-padding] == $base * 2;
  }

}

@else {
  /*

  landscape mobile

  ----------------------------------------------- */

  @if ::window[width] < 960  {

    .banner-cta {

      .title.main {
        font-size: 34px;
      }
      aside {
        overflow: hidden;
      }
      aside .title {
        font-size: 32px;
      }
      aside .subtitle {
        font-size: 18px;
      }
      aside .button {
        font-size: 16px;
      }
      aside svg.logo {
        visibility: hidden;
      }

      @v |~-~(& .title.main)~-~| in(&) gap($base * 3);
      @v |~-~(& aside)~-~| in(&) gap($base * 3);
      (& .title.main)[center-y] == (& aside)[center-y] == (&)[center-y];

      [aside-size] == $md * 3;
      [aside-title-margin-top] == ($base * 6) - 16;
      [aside-button-margin-top] == $base * 2;
      [aside-button-h-padding] == $base * 2;
      [aside-button-v-padding] == $base * 2;

      &.cta-left {
        @h |-(& aside)-(& .title.main)-| in(&) gap($base * 4);
      }

      &.cta-right {
        @h |-(& .title.main)-(& aside)-| in(&) gap($base * 4);
      }
    }
  }

  /*

  Desktop

  ----------------------------------------------- */

  @else {

    .banner-cta {


      .title.main {
        font-size: 64px;
      }
      aside .title {
        font-size: 56px;
      }
      aside .subtitle {
        font-size: 20px;
      }
      aside .button {
        font-size: 20px;
      }
      aside svg.logo {
        visibility: visible;
      }

      @v |~-~(& .title.main)~-~| in(&) gap($md);
      @v |~-~(& aside)~-~| in(&) gap($md);
      (& .title.main)[center-y] == (& aside)[center-y] == (&)[center-y];

      [aside-size] == $md * 5;
      [aside-title-margin-top] == ($base * 10) - 32;
      [aside-button-margin-top] == $base * 4;
      [aside-button-h-padding] == $base * 3;
      [aside-button-v-padding] == $base * 2;

      aside {
        (& .logo)[center-x] == &[center-x];
        @v (& .logo)-| in(&) gap($base * 7);

        .logo {
          width: == &[height] == 46;
        }
      }

      &.cta-left {
        @h |-(& aside)-(& .title.main)-| in(&) gap($md);
      }

      &.cta-right {
        @h |-(& .title.main)-(& aside)-| in(&) gap($md);
      }
    }

  }
}


</style>

<script>
if (window.parent != window) {
  window.addEventListener('message', function(e) {
    window.engine.merge(e.data)
  })
}

function boot(values) {
  var data = {
    "md": 72,
    "-md": -72,
    "-md-2": -36,
    "md-2": 36,
    "md2": 144,
    "md-gap": 36,
    "md-gap2": 18,
    "base": 8,
  }
  for (var property in values)
    data[property] = values[property];
  document.addEventListener('solve', function(solution) {
    delete solution.detail.engine
    window.parent.postMessage(solution.detail, location.origin)
  })
  window.engine = GSS(document, data);
} 

boot()

</script>

